<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_组件化基本使用</title>
</head>
<!-- 
    说明: 组件里的结构只允许有一个根标签
 -->
<body>
    <!-- 当 dom 里面出现了很多重复一样的 html 结构时,就要考虑将它抽离成组件 -->
    <div id="app">
        <!-- <h2>我是标题...</h2>
        <p>我是段落内容...</p>

        <h2>我是标题...</h2>
        <p>我是段落内容...</p>

        <h2>我是标题...</h2>
        <p>我是段落内容...</p> -->


        <self-zujian></self-zujian>
        <self-zujian></self-zujian>

    </div>
</body>
<script src="../vue.js"></script>
<script>
    //使用组件步骤,组件自己的理解就是将每个功能的 html 片段抽离出来
    //1.创建组件构建器对象
    const testComponent = Vue.extend({
        template: `
            <div>
                <h2>我是标题...</h2>
                <p>我是段落内容...</p>
            </div>
        `
    })

    //2.注册组件:第一个参数为自定义组件名字,第二个为创建的组件对象
    Vue.component('self-zujian', testComponent)

    const vm = new Vue({
        el: '#app'
    })
</script>

</html>